import {useState,useEffect,useCallback} from 'react';

export default function HookHotWinResize(){
    const [size, setSize] = useState({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    });
    const onResize = useCallback(()=>{
        console.log('----onResize useCallback-------')
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    },[]);

    useEffect(()=>{
        console.log('绑定 onResize 监听器')
        window.addEventListener('resize',onResize);
        return ()=>{
            console.log('解绑 onResize 监听器')
            window.removeEventListener('resize',onResize);
        }
    },
    // 这里需要让 eslint 忽略空数组的参数，否则 eslint 会报出警告，说不建议传空数组
    // 其实传递空数组是有意义的：为了让该useEffect 只在当前函数所在组件被渲染后执行一次，
    // 除非该函数所处组件被销毁了，便执行一次返回函数中的解绑操作，就是类似组件的生命周期钩子
    // eslint-disable-next-line
    []);

    return size;
}